import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Helmet } from 'react-helmet';
import NProgress from 'nprogress';
import { Layout } from '../components';
import { classnames, config } from '../configs';
import { runListeners } from '../utils/util';
import '../themes/index.less';
import './app.less';
import Setting from './setting';
import { isReleaseVersion } from '../components/permissionControl';
import { api } from '../services/dashboard';

const { prefix } = config;

const { Header, Bread, Footer, Sider, styles } = Layout;
let lastHref;

class App extends Component {
	getChildContext() {
		const { app } = this.props;
		return {
			theme: app.theme
		};
	}

	render() {
		const { children, location, dispatch, app, loading } = this.props;
		const {
			user, siderFold, darkTheme, isNavbar,
			menuPopoverVisible, navOpenKeys, menu,
			settingVisible, selectedKeys, theme, showInHeader, secondBread
		} = app;
		const href = window.location.href;

		if (lastHref !== href) {
			NProgress.start();
			if (!loading.global) {
				NProgress.done();
				lastHref = href;
			}
		}

		const hideSetting = () => {
			dispatch({ type: 'app/setting' });
		};
		const headerProps = {
			menu,
			user,
			siderFold,
			location,
			isNavbar,
			menuPopoverVisible,
			selectedKeys,
			navOpenKeys,
			switchMenuPopover() {
				dispatch({ type: 'app/switchMenuPopver' });
			},
			handleClickMenu(e) {
				dispatch({ type: `app/${e.key}` });
			},
			switchSider() {
				dispatch({ type: 'app/switchSider' });
			},
			changeOpenKeys(openKeys) {
				dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } });
			},
			changeSelectKeys(selectKeys) {
				dispatch({ type: 'app/handleSelectKeys', payload: { selectedKeys: selectKeys } });
			},
			showInHeader
		};

		const siderProps = {
			menu,
			user,
			siderFold,
			darkTheme,
			location,
			selectedKeys,
			navOpenKeys,
			changeTheme() {
				dispatch({ type: 'app/switchTheme' });
			},
			changeOpenKeys(openKeys) {
				localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys));
				dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } });
			},
			changeSelectKeys(selectKeys) {
				localStorage.setItem(`${prefix}selectedKeys`, JSON.stringify(selectKeys));
				dispatch({ type: 'app/handleSelectKeys', payload: { selectedKeys: selectKeys } });
			},

		};

		const breadProps = {
			menu,
			secondBread,
		};

		if (config.openPages && config.openPages.indexOf(location.pathname) > -1) {
			return <div>{children}</div>;
		}

		const { logo } = config;

		const isRelease = isReleaseVersion(user.permissions, api.getUserPanel);
		return (
			<div className={theme.name}>
				<Helmet>
					<title>{config.name}</title>
					<meta name="viewport" content="width=device-width, initial-scale=1.0" />
				</Helmet>
				<div
					className={classnames(
						styles.layout,
						{ [styles.fold]: isNavbar ? false : siderFold },
						{ [styles.withnavbar]: isNavbar }
					)}
				>
					{!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>
						<Sider {...siderProps} />
					</aside> : ''}
					<div className={styles.main}>
						<Header {...headerProps} isRelease={isRelease} />
						<Bread {...breadProps} location={location} />
						<div className={styles.container}>
							<div className={styles.content}>
								{children}
							</div>
						</div>
						<Footer />
					</div>
				</div>
				{/* <Setting
					user={user}
					visible={settingVisible}
					onCancel={hideSetting}
					dispatch={dispatch}
				/> */}
			</div>
		);
	}
}

App.childContextTypes = {
	theme: PropTypes.object
};

App.propTypes = {
	children: PropTypes.element.isRequired,
	location: PropTypes.object,
	dispatch: PropTypes.func,
	app: PropTypes.object,
	loading: PropTypes.object,
};

export default connect((state) => {
	const { app, loading } = state;
	runListeners(state);
	return { app, loading };
})(App);
